<!-- 我的钱包 -->
<template>
	<view style="background: #f2f2f2;height: 100vh;">
		<u-navbar title="我的钱包" :borderBottom="false" background="backgroundColor:'#38BE8C'" title-color="#FFFFFF"
			back-icon-color="#FFFFFF"></u-navbar>

		<view class="">
			<view class="back"></view>
			<view class="card">
				<view class="carhead">
					<view class="top flex_bet_align">
						<view class="zw"></view>
						<view class="balance">账户余额(元)</view>
						<navigator class="zw" url="detailed" hover-class="none">收支明细</navigator>
					</view>
					<view class="num">{{wallet.countBalance?wallet.countBalance:0}}</view>
					<view class="frozenNum">冻结金额(元)：{{wallet.frozenBalance?wallet.frozenBalance:0}}</view>
					<view class="grid">
						<view class="item">
							<view class="title">今日收益(元)</view>
							<view>{{wallet.todayProfit}}</view>
						</view>
						<view class="item">
							<view class="title">累计收益(元)</view>
							<view>{{wallet.countProfit}}</view>
						</view>
						<view class="item">
							<view class="title">可提现金额(元)</view>
							<view>{{wallet.withdrawalMoney}}</view>
						</view>
						<view class="item">
							<view class="title">累计充值(元)</view>
							<view>{{wallet.rechargeMoney}}</view>
						</view>
					</view>
					<view class="btn_group flex">
						<navigator url="cashOut" hover-class="none" class="btn">提现</navigator>
						<navigator url="walletCharge" hover-class="none" class="btn_fill">充值</navigator>
					</view>
				</view>

				<view class="grayline"></view>

				<view class="myCard">
					<view class="flex_bet_align">
						<view class="title">我的银行卡</view>
						<navigator url="/personal/myCard" hover-class="none" class="all"><text>全部</text></navigator>
					</view>

					<navigator url="/personal/addCard" hover-class="none" class="add" v-if="list.length<1">添加+
					</navigator>

					<block v-else>
						<view v-for="(item,index) in list" :key="index" class="add" v-if="index==0">
							{{item.bank_name}}
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this, shak;
	export default {
		data() {
			return {
				wallet: {},
				list: []
			}
		},
		onLoad(options) {
			_this = this
		},
		onShow() {
			_this.getdata()
			_this.getcard()
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			_this.getdata()
		},
		methods: {
			// 获取数据
			getdata() {
				_this.$api.get("mywallet", {}).then(data => {
					_this.wallet = data
				});
			},
			getcard() {
				_this.$api.get("getbanklist").then(data => {
					console.log(data.data)
					_this.list = data.data
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F2F2F2;
		font-family: PingFang SC;
	}

	.back {
		width: 1050rpx;
		height: 420rpx;
		border-radius: 0 0 320rpx 320rpx;
		background-color: #38BE8C;
		position: fixed;
		top: 0px;
		left: -150rpx;
	}

	.card {
		position: fixed;
		width: 700rpx;
		margin: 30rpx auto;
		left: 25rpx;

		.carhead {
			padding: 63rpx 0 50rpx;
			background: #fff;
			border-radius: 10rpx;
		}

		.top {
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;

			.zw {
				flex: 1;
				text-align: center;
				color: #999999;
			}

			.balance {
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
			}
		}

		.num {
			font-size: 60rpx;
			font-weight: 500;
			text-align: center;
			color: #333333;
			margin: 20rpx 0 30rpx;
		}

		.frozenNum {
			font-size: 24rpx;
			font-weight: 500;
			text-align: center;
			color: #c0c0c0;
		}

		.grid {
			display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: 50% 50%;
			margin-top: 70rpx;

			.item {
				text-align: center;
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 50rpx;

				.title {
					font-size: 26rpx;
					font-weight: 500;
					color: #666666;
					margin-bottom: 20rpx;
				}
			}
		}

		.btn_group {
			margin-bottom: 50rpx;
			justify-content: space-around;

			.btn {
				width: 151rpx;
				height: 58rpx;
				border: 1rpx solid #38be8c;
				border-radius: 30rpx;
				font-size: 28rpx;
				font-weight: 500;
				text-align: center;
				line-height: 58rpx;
				color: #38be8c;
			}

			.btn_fill {
				width: 151rpx;
				height: 58rpx;
				background: #38be8c;
				border-radius: 29rpx;
				font-size: 28rpx;
				font-weight: 500;
				text-align: center;
				line-height: 58rpx;
				color: #ffffff;
			}
		}

		.grayline {
			height: 35rpx;
			background: #f2f2f2;
		}
	}

	.myCard {
		width: 700rpx;
		height: 296rpx;
		background: #ffffff;
		border-radius: 10rpx;
		margin: 0 auto;
		z-index: 1;
		padding: 30rpx;

		.title {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}

		.all {
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;
		}

		.add {
			width: 616rpx;
			height: 152rpx;
			border: 1rpx solid #cdcdcd;
			border-radius: 9rpx;
			margin-top: 30rpx;
			font-size: 26rpx;
			font-weight: 500;
			text-align: center;
			color: #999999;
			line-height: 152rpx;
		}
	}
</style>
